<template>
	<view>
		<view class="header">
			<view :style="{height: systemBarHeight + 'px'}">
			</view>

			<view class="header_tit">
				<image src="/static/index/fh2.png" mode="" @click="fh()"></image>
			</view>
			<view class="brand">
				<view class="brand_tit">
					<image src="/static/logo.png" mode=""></image>
					<text>仿生机器人</text>
				</view>
				<view class="brand_js">
					<text>小米公司成立於 2010 年 4 月，並於 2018 年 7 月 9 日在香港證券交易所主板掛牌上市 (1810.HK)。是一家以智慧型手機、智慧硬體和 IoT
						平台為核心的消費電子及智慧製造公司。 秉持「與使用者交朋友，成為使用者心中最酷的公司」的願景，小米不斷追求創新、高品質的使用者體驗和營運效率。</text>
				</view>
			</view>
		</view>
		<view class="tot">

		</view>


		<view class="tabs">
			<v-tabs v-model="current" color="#7D8CA4" activeColor='#152034' lineColor='#386AF6' :lineScale='0.2'
				:tabs="tabs" :scroll="false" @change="changeTab"></v-tabs>
		</view>
		
		
		<view class="article" v-if="current==0">
			<view class="articlelist">
				<!-- 单文张 -->
				<view class="articlelist_item1">
					<view class="articlelist_item1_tit">
						<text>智能化普及风暴，零跑全新机器人时代2月上市定位3ss级别别别影响力接口连接离开蛔…</text>
					</view>

					<view class="articlelist_item1_browse">
						<text>孙悟空 · 88浏览 · 999评论</text>
					</view>
				</view>
				<!-- 文章加单图 -->
				<view class="articlelist_item2">
					<view class="articlelist_item2_lf">
						<view class="articlelist_item2_lf_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上市定位…</text>
						</view>
						<view class="articlelist_item2_lf_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
					<view class="articlelist_item2_rg">
						<image src="/static/logo.png" mode=""></image>
					</view>
				</view>
				<!-- 文章加多图 -->
				<view class="articlelist_item3">
					<view class="articlelist_item3_tit">
						<text>智能化普及风暴，零跑全新机器人时代2月上市定位3ss级别</text>
					</view>
					<view class="articlelist_item3_imgitem">
						<image src="/static/logo.png" mode=""></image>
						<image src="/static/logo.png" mode=""></image>
						<image src="/static/logo.png" mode=""></image>
					</view>

					<view class="articlelist_item3_browse">
						<text>孙悟空 · 88浏览 · 999评论</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 视频 -->
		<view class="video" v-if="current==1">
			<view class="videolist">
				<view class="videolist_item">
					<view class="videolist_item_tit">
						<text>智能化普及风暴，零跑全新机器人时代2月上市定位3ss级别</text>
					</view>
					<view class="videolist_item_video">
						<view class="video1">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<image src="/static/bofang.png" mode=""></image>
						<view class="video2">
							<text>99.99</text>
						</view>
					</view>
					<view class="videolist_item_browse">
						<text>孙悟空 · 88浏览 · 999评论</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				current: 0,
				tabs: [
					'文章',
					'视频',

				],

			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			/* 返回 */
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			changeTab(index) {
				this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-image: url("");
		background-repeat: no-repeat;
		background-size: 100% 419.85rpx;


	}

	.header_tit {
		margin-top: 21rpx;

		>image {
			width: 61.07rpx;
			height: 61.07rpx;
			margin-left: 15rpx;
		}

	}

	.brand {
		width: 750rpx;
		padding-bottom: 26rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 68rpx;

		.brand_tit {
			width: 91%;
			display: flex;
			margin: auto;

			>image {
				width: 153rpx;
				height: 153rpx;
				border-radius: 76.5rpx;
				border: 4rpx solid #F8F8FA;
				margin-top: -30rpx;
			}

			>text {

				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 46rpx;
				color: #152034;
				margin-top: 24rpx;
				margin-left: 15rpx;
			}
		}

		.brand_js {
			width: 91%;
			margin: 30rpx auto 0;


			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #45516B;

		}
	}

	.tot {
		width: 750rpx;
		height: 19rpx;
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tabs {
		padding-top: 15rpx;
		width: 60%;
		margin: auto;
		padding-bottom: 34rpx;
	}
	
	.articlelist {
		width: 91%;
		margin: auto;
	
		.articlelist_item1 {
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	
			.articlelist_item1_tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #152034;
				display: -webkit-box;
				/* 设置为WebKit内核的弹性盒子模型 */
				-webkit-box-orient: vertical;
				/* 垂直排列 */
				-webkit-line-clamp: 2;
				/* 限制显示三行 */
				overflow: hidden;
				/* 隐藏超出范围的内容 */
				text-overflow: ellipsis;
			}
	
			.articlelist_item1_browse {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #7D8CA4;
				margin-top: 30rpx;
			}
		}
	
		.articlelist_item2 {
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
	
			.articlelist_item2_lf {
				.articlelist_item2_lf_tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #152034;
					display: -webkit-box;
					/* 设置为WebKit内核的弹性盒子模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列 */
					-webkit-line-clamp: 2;
					/* 限制显示三行 */
					overflow: hidden;
					/* 隐藏超出范围的内容 */
					text-overflow: ellipsis;
				}
	
				.articlelist_item2_lf_browse {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #7D8CA4;
					margin-top: 30rpx;
				}
			}
	
			.articlelist_item2_rg {
				>image {
					width: 229rpx;
					height: 172rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
		}
	
		.articlelist_item3 {
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	
			.articlelist_item3_tit {
	
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #152034;
	
			}
	
			.articlelist_item3_imgitem {
				display: flex;
				justify-content: space-between;
				margin-top: 15rpx;
	
				>image {
					width: 219rpx;
					height: 168rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
	
			.articlelist_item3_browse {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #7D8CA4;
				margin-top: 30rpx;
			}
		}
	}
	
	.video {
		width: 91%;
		margin: auto;
	
		.videolist_item {
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	
			.videolist_item_tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #071F3A;
			}
	
			.videolist_item_video {
				margin-top: 26rpx;
				display: flex;
				align-items: center;
	
				width: 691rpx;
				position: relative;
				justify-content: center;
	
				.video1 {
	
					>image {
						width: 691rpx;
						height: 389rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
	
				>image {
					width: 107.17rpx;
					height: 109.01rpx;
					position: absolute;
					z-index: 1;
					margin: auto;
					top: auto;
	
					bottom: auto;
	
				}
	
				.video2 {
					width: 80rpx;
					position: absolute;
					bottom: 0;
					right: 15rpx;
					bottom: 30rpx;
					z-index: 11;
					height: 35rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
	
	
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
	
			.videolist_item_browse {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #7D8CA4;
				margin-top: 30rpx;
			}
		}
	}
	
</style>